<template>
  <div class="sidebarMenu">
    <div class="userBox">
      <span class="userImg"></span>
      <span class="userName">{{userName}}</span>
    </div>
    <ul class="navItems">
      <li class="navLis" v-on:click="hideSideBar"><router-link to="/home/index">首页</router-link></li>
      <li class="navLis" v-on:click="hideSideBar"><router-link to="/home/scenicList">诗词</router-link></li>
      <li class="navLis" v-on:click="hideSideBar"><router-link to="/home/about">关于</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'sidebarMenu',
  data () {
    return {
      userName: ''
    }
  },
  created () { // 监听导航的变化
    // console.log(this.$route.path,this.$route.query.name)
    this.userName = unescape(localStorage.name)// 从缓存中获取用户登录名字
  },
  methods: {
    hideSideBar: function () {
      this.$emit('listenChanges', false)// 在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import "../../../static/css/overallModules/sidebarMenu.scss"
</style>
